<template>
  <div id="warn-panel" style="width: 480px">
    <div class="box">
      <div class="calendarDiv">
        <input type="text" v-model="input_date"/><i class="i-icon" @click="setStartCalenderShow()"></i>
        <Calendar v-if="isStartCalendarShow" @timeEvent="setHisTime" :calendar="all_time"></Calendar>
      </div>
      <div class="ca-line"></div>
      <div class="calendarDiv">
        <input type="text" value="2018年16月28号"/><i class="i-icon" @click="setEndCalenderShow()"></i>
        <Calendar v-if="isEndCalendarShow"></Calendar>
      </div>
      <span class="btn">确认</span>
    </div>
    <div class="warnInforList">
      报警信息
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import Calendar from "./calendar";
  import DateTimeHelper from '../../util/datetime-helper';
  export default {
    name: 'VueComponent',
    components: {Calendar},
    data () {
      return {
        input_date:'',
        isStartCalendarShow:false,
        isEndCalendarShow:false,

      }
    },
    mounted(){
      this.initHisTime();
    },
    computed:{
      ...mapGetters(['all_time', 'single_time', 'his_single_car']),
    },
    methods:{
      ...mapMutations(['updateCurState', 'updateAllTime', 'updateSingleTime', 'updateHisSingleCar']),
      setStartCalenderShow(){
        this.isStartCalendarShow = !this.isStartCalendarShow;
      },
      setEndCalenderShow(){
        this.isEndCalendarShow = !this.isEndCalendarShow;
      },
      initHisTime(){
        let formCurDate = DateTimeHelper.formCurDate();  //今天日期
        let formPreDate = DateTimeHelper.formPreDate();   //前一天日期
        let curTime = formCurDate.split(/[.: ]/);
        let preTime = formPreDate.split(/[.: ]/);
        this.updateSingleTime({
          year: parseInt(curTime[0]),
          month: parseInt(curTime[1]),
          day: parseInt(curTime[2]),
        });
        this.formatHisTime();
      },
      formatHisTime(){
        this.input_date = `${this.all_time.year}年${this.all_time.month}月${this.all_time.day}日`;
      },
      setHisTime(data){
          this.input_date = `${data.year}年${data.month}月${data.day}日`;
          this.isStartCalendarShow = false;
          this.updateAllTime(data);
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../../static/common/common.scss";

  #warn-panel {
    position: absolute;
    left: 0;
    top: 50px;
    background: #191f30;
    @include inputBorder;

    .box{
      padding: 8px 14px;

      .calendarDiv{
        @include inputBorder;
        display: inline-block;

        min-width: 140px;
        height: 42px;
        box-sizing: border-box;
        padding: 0 5px;
        input{
          display: inline-block;
          vertical-align: middle;
          padding: 3px 5px;
          width: 132px;
          font-size: $min-input-font;
          color: #d6e0f2;
          background: #1a1b2a;
          letter-spacing: 1px;
          line-height: 24px;
          border: none;
          outline: none;
        }
        .i-icon{
          display: inline-block;
          vertical-align: middle;
          width: 20px;
          height: 30px;
          background: url("../../../static/images/index/c-icon.png") no-repeat center;
          cursor: pointer;
        }
      }
      .ca-line{
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 2px;
        background: #38a3d8;
      }
      .btn{
        float: right;
        vertical-align: middle;
        height: 38px;
        line-height: 38px;
        width: 48px;
        font-size: $font-normal;
        background: #1a1b2a;
        text-align: center;
        letter-spacing: 1px;
        border-radius: 1px;
        @include inputBorder;
        margin-left: 5px;

        &:hover {
          background: linear-gradient(#0d798d, #064e63);
        }
      }
    }
    .warnInforList{

    }
  }
</style>
